import classNames from "classnames";
import styles from "./index.module.scss";

interface IInputProps
  extends React.DetailedHTMLProps<
    React.InputHTMLAttributes<HTMLInputElement>,
    HTMLInputElement
  > {
  errorMsg?: string;
  extra?: React.ReactNode;
}

export default function Input({
  className,
  errorMsg,
  extra,
  ...restProps
}: IInputProps) {
  return (
    <div className={styles.root}>
      <div className="input-box">
        <input className={classNames("input", className)} {...restProps} />
        <div className="validate">{errorMsg}</div>
        {extra}
      </div>
    </div>
  );
}
